import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class IndexController extends GetxController {
  RxInt foodType = 0.obs;

  void foodTypeChange(int value) {
    foodType.value = value;
  }

  RxList leftList = ["咖啡", "奶茶", "水果茶", "小食", "饼干", "辣条"].obs;
  RxInt leftCurrentIndex = 0.obs; // 当前选中的左侧索引
  void leftCurrentChange(int value) {
    leftCurrentIndex.value = value;
    scrollToGroup(value);
  }

  final RxList<Map<String, dynamic>> rightList = [
    {
      "label": "咖啡",
      "list": [
        {
          "image": "https://dummyimage.com/140x140/3c9cff/fff",
          "name": "丝滑拿铁",
          "describe": "不苦微甜",
          "price": 22,
          "select": 0,
        }
      ]
    },
    {
      "label": "奶茶",
      "list": [
        {
          "image": "https://dummyimage.com/140x140/3c9cff/fff",
          "name": "丝滑拿铁",
          "describe": "不苦微甜",
          "price": 22,
          "select": 0,
        }
      ]
    },
    {
      "label": "水果茶",
      "list": [
        {
          "image": "https://dummyimage.com/140x140/3c9cff/fff",
          "name": "一杯奶茶",
          "describe": "不苦微甜",
          "price": 22,
          "select": 0,
        },
        {
          "image": "https://dummyimage.com/140x140/3c9cff/fff",
          "name": "二杯奶茶",
          "describe": "不苦微甜",
          "price": 22,
          "select": 0,
        },
        {
          "image": "https://dummyimage.com/140x140/3c9cff/fff",
          "name": "三杯奶茶",
          "describe": "不苦微甜",
          "price": 22,
          "select": 0,
        }
      ]
    },
    {
      "label": "小食",
      "list": [
        {
          "image": "https://dummyimage.com/140x140/3c9cff/fff",
          "name": "一杯奶茶",
          "describe": "不苦微甜",
          "price": 22,
          "select": 0,
        },
        {
          "image": "https://dummyimage.com/140x140/3c9cff/fff",
          "name": "二杯奶茶",
          "describe": "不苦微甜",
          "price": 22,
          "select": 0,
        },
        {
          "image": "https://dummyimage.com/140x140/3c9cff/fff",
          "name": "三杯奶茶",
          "describe": "不苦微甜",
          "price": 22,
          "select": 0,
        }
      ]
    },
    {"label": "饼干", "list": []},
    {
      "label": "辣条",
      "list": [
        {
          "image": "https://dummyimage.com/140x140/3c9cff/fff",
          "name": "一杯奶茶",
          "describe": "不苦微甜",
          "price": 22,
          "select": 0,
        },
        {
          "image": "https://dummyimage.com/140x140/3c9cff/fff",
          "name": "二杯奶茶",
          "describe": "不苦微甜",
          "price": 22,
          "select": 0,
        },
        {
          "image": "https://dummyimage.com/140x140/3c9cff/fff",
          "name": "三杯奶茶",
          "describe": "不苦微甜",
          "price": 22,
          "select": 0,
        }
      ]
    }
  ].obs;

  //listView 滚动控制器
  final ScrollController rightScrollController = ScrollController();

  //保存每个分组的 GlobalKey
  final List<GlobalKey> rightKeys = [];

  //右侧滚动事件
  void scrollToGroup(int index) {
    if (index < 0 || index >= rightKeys.length) return; //防止索引越界
    final key = rightKeys[index]; //回去对应的key
    final context = key.currentContext; //获取该分组的 BuilderContext
    if (context != null) {
      //滚动到目标分组,使其可见
      Scrollable.ensureVisible(context,
          duration: const Duration(milliseconds: 300), curve: Curves.easeInOut);
    }
  }

  //遮罩层显示状态
  var isMaskVisible = false.obs;
  late OverlayEntry? _overlayEntry;
  final TextEditingController textInputController = TextEditingController();

  //显示遮罩层
  void showMask(int wrapVal, int itemVal) {
    final itemObj = rightList[wrapVal]['list'][itemVal];

    final RxList<Map<String, dynamic>> itemObjType = [
      {
        "label": "规格",
        "list": [
          {"label": "大", "value": ""},
          {"label": "小", "value": ""}
        ]
      },
      {
        "label": "温度",
        "list": [
          {"label": "冰", "value": ""},
          {"label": "热", "value": ""}
        ]
      },
      {
        "label": "甜度",
        "list": [
          {"label": "全糖", "value": ""},
          {"label": "半糖", "value": ""}
        ]
      }
    ].obs;

    print("$itemObj");

    isMaskVisible.value = true;
    _overlayEntry = OverlayEntry(
      builder: (context) => Positioned.fill(
        child: Material(
          child: Scaffold(
            body: GestureDetector(
              onTap: () {
                hideMask();
              },
              child: Container(
                  color: const Color.fromRGBO(0, 0, 0, .5),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      GestureDetector(
                        onTap: () {},
                        child: Container(
                          width: 680.w,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(35.r),
                            color: const Color.fromRGBO(255, 255, 255, 1),
                          ),
                          child: Column(
                            children: [
                              ClipRRect(
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(30.r),
                                    topRight: Radius.circular(30.r)),
                                child: Image(
                                  image: const NetworkImage(
                                      "https://dummyimage.com/750x400/3c9cff/fff"),
                                  width: double.infinity,
                                  height: 312.h,
                                  fit: BoxFit.cover,
                                ),
                              ),
                              Container(
                                padding: EdgeInsets.only(
                                    left: 35.w,
                                    top: 30.h,
                                    right: 33.w,
                                    bottom: 30.h),
                                child: Column(
                                  children: <Widget>[
                                    Row(
                                      children: [
                                        Text("柠檬水",
                                            style: TextStyle(
                                              fontSize: 30.r,
                                              color: const Color.fromRGBO(
                                                  51, 51, 51, 1),
                                            ))
                                      ],
                                    ),
                                    SizedBox(
                                      height: 50.h,
                                    ),
                                    Column(
                                      children: <Widget>[
                                        Row(
                                          children: [
                                            Text("规格",
                                                style: TextStyle(
                                                    fontSize: 25.r,
                                                    fontFamily: "ShuHeiTiBold",
                                                    color: const Color.fromRGBO(
                                                        0, 0, 0, 1))),
                                            SizedBox(
                                              width: 30.w,
                                            ),
                                            Container(
                                              width: 150.w,
                                              height: 55.h,
                                              decoration: BoxDecoration(
                                                  color: const Color.fromRGBO(
                                                      249, 249, 248, 1),
                                                  borderRadius:
                                                  BorderRadius.circular(8.r)),
                                              child: Align(
                                                child: Text("大",
                                                    style: TextStyle(
                                                        fontSize: 22.r,
                                                        color:
                                                        const Color.fromRGBO(
                                                            0, 0, 0, 1))),
                                              ),
                                            ),
                                            SizedBox(
                                              width: 28.w,
                                            ),
                                            Container(
                                              width: 150.w,
                                              height: 55.h,
                                              decoration: BoxDecoration(
                                                  color: const Color.fromRGBO(
                                                      249, 249, 248, 1),
                                                  borderRadius:
                                                  BorderRadius.circular(8.r)),
                                              child: Align(
                                                child: Text("小",
                                                    style: TextStyle(
                                                        fontSize: 22.r,
                                                        color:
                                                        const Color.fromRGBO(
                                                            0, 0, 0, 1))),
                                              ),
                                            )
                                          ],
                                        ),
                                        SizedBox(
                                          height: 24.h,
                                        ),
                                        Row(
                                          children: [
                                            Text("温度",
                                                style: TextStyle(
                                                    fontSize: 25.r,
                                                    fontFamily: "ShuHeiTiBold",
                                                    color: const Color.fromRGBO(
                                                        0, 0, 0, 1))),
                                            SizedBox(
                                              width: 30.w,
                                            ),
                                            Container(
                                              width: 150.w,
                                              height: 55.h,
                                              decoration: BoxDecoration(
                                                  color: const Color.fromRGBO(
                                                      249, 249, 248, 1),
                                                  borderRadius:
                                                  BorderRadius.circular(8.r)),
                                              child: Align(
                                                child: Text("冰",
                                                    style: TextStyle(
                                                        fontSize: 22.r,
                                                        color:
                                                        const Color.fromRGBO(
                                                            0, 0, 0, 1))),
                                              ),
                                            ),
                                            SizedBox(
                                              width: 28.w,
                                            ),
                                            Container(
                                              width: 150.w,
                                              height: 55.h,
                                              decoration: BoxDecoration(
                                                  color: const Color.fromRGBO(
                                                      249, 249, 248, 1),
                                                  borderRadius:
                                                  BorderRadius.circular(8.r)),
                                              child: Align(
                                                child: Text("热",
                                                    style: TextStyle(
                                                        fontSize: 22.r,
                                                        color:
                                                        const Color.fromRGBO(
                                                            0, 0, 0, 1))),
                                              ),
                                            )
                                          ],
                                        ),
                                        SizedBox(
                                          height: 24.h,
                                        ),
                                        Row(
                                          children: [
                                            Text("甜度",
                                                style: TextStyle(
                                                    fontSize: 25.r,
                                                    fontFamily: "ShuHeiTiBold",
                                                    color: const Color.fromRGBO(
                                                        0, 0, 0, 1))),
                                            SizedBox(
                                              width: 30.w,
                                            ),
                                            Container(
                                              width: 150.w,
                                              height: 55.h,
                                              decoration: BoxDecoration(
                                                  color: const Color.fromRGBO(
                                                      249, 249, 248, 1),
                                                  borderRadius:
                                                  BorderRadius.circular(8.r)),
                                              child: Align(
                                                child: Text("全糖",
                                                    style: TextStyle(
                                                        fontSize: 22.r,
                                                        color:
                                                        const Color.fromRGBO(
                                                            0, 0, 0, 1))),
                                              ),
                                            ),
                                            SizedBox(
                                              width: 28.w,
                                            ),
                                            Container(
                                              width: 150.w,
                                              height: 55.h,
                                              decoration: BoxDecoration(
                                                  color: const Color.fromRGBO(
                                                      249, 249, 248, 1),
                                                  borderRadius:
                                                  BorderRadius.circular(8.r)),
                                              child: Align(
                                                child: Text("七分糖",
                                                    style: TextStyle(
                                                        fontSize: 22.r,
                                                        color:
                                                        const Color.fromRGBO(
                                                            0, 0, 0, 1))),
                                              ),
                                            ),
                                            SizedBox(
                                              width: 28.w,
                                            ),
                                            Container(
                                              width: 150.w,
                                              height: 55.h,
                                              decoration: BoxDecoration(
                                                  color: const Color.fromRGBO(
                                                      249, 249, 248, 1),
                                                  borderRadius:
                                                  BorderRadius.circular(8.r)),
                                              child: Align(
                                                child: Text("三分糖",
                                                    style: TextStyle(
                                                        fontSize: 22.r,
                                                        color:
                                                        const Color.fromRGBO(
                                                            0, 0, 0, 1))),
                                              ),
                                            )
                                          ],
                                        ),
                                      ],
                                    ),
                                    SizedBox(
                                      height: 30.h,
                                    ),
                                    Container(
                                      margin: EdgeInsets.only(bottom: 20.h),
                                      padding: EdgeInsets.only(
                                          top: 20.h, bottom: 18.h),
                                      child: Text(
                                          "smoovclatte丝滑拿铁口感丝滑般柔顺,咖啡的香醇和牛奶的丝滑如艺术般完美结合，淡淡丝甜，让你在繁忙中随时享受片刻活力和悠闲。",
                                          style: TextStyle(
                                              fontSize: 22.r,
                                              color: const Color.fromRGBO(
                                                  102, 102, 102, 1))),
                                      decoration: BoxDecoration(
                                          border: Border(
                                              top: BorderSide(
                                                  width: 1.r,
                                                  color: const Color.fromRGBO(
                                                      238, 238, 238, 1)),
                                              bottom: BorderSide(
                                                  width: 1.r,
                                                  color: const Color.fromRGBO(
                                                      238, 238, 238, 1)))),
                                    ),
                                    Row(
                                      children: [
                                        DefaultTextStyle(
                                          style: const TextStyle(
                                              color: Colors.red),
                                          child: Row(
                                            mainAxisAlignment: MainAxisAlignment.end,
                                            children: [
                                              Text("￥",
                                                  style: TextStyle(
                                                      fontSize: 20.r)),
                                              Text("33",
                                                  style: TextStyle(
                                                      fontSize: 36.r))
                                            ],
                                          ),
                                        ),
                                        Spacer(),
                                        Row(
                                          children: [
                                            GestureDetector(
                                              child: Container(
                                                width: 50.w,
                                                height: 50.h,
                                                decoration: const BoxDecoration(
                                                    color: Colors.red,
                                                    shape: BoxShape.circle
                                                ),
                                                child: Icon(Icons.add,color: Colors.white,size: 32.r,),
                                              ),
                                            ),
                                            SizedBox(
                                              width: 100.w,
                                              child:  SingleChildScrollView(
                                                child: TextField(
                                                  textAlign: TextAlign.center,
                                                  style: TextStyle(
                                                    color: Colors.black,
                                                    fontSize: 32.r,
                                                  ),
                                                  decoration: const InputDecoration(
                                                      border: InputBorder.none
                                                  ),
                                                  keyboardType: TextInputType.number,
                                                  autofocus: true,
                                                ),
                                              ),
                                            ),
                                            GestureDetector(
                                              child: Container(
                                                width: 50.w,
                                                height: 50.h,
                                                decoration: const BoxDecoration(
                                                    color: Colors.red,
                                                    shape: BoxShape.circle
                                                ),
                                                child: Icon(Icons.add,color: Colors.white,size: 32.r,),
                                              ),
                                            )
                                          ],
                                        )
                                      ],
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      )
                    ],
                  )),
            ),
          ),
        ),
      ),
    );
    Overlay.of(Get.overlayContext!).insert(_overlayEntry!);
    isMaskVisible.value = true;
  }

  void showMask1(int wrapVal, int itemVal) {
    final itemObj = rightList[wrapVal]['list'][itemVal];

    final RxList<Map<String, dynamic>> itemObjType = [
      {
        "label": "规格",
        "list": [
          {"label": "大", "value": ""},
          {"label": "小", "value": ""}
        ]
      },
      {
        "label": "温度",
        "list": [
          {"label": "冰", "value": ""},
          {"label": "热", "value": ""}
        ]
      },
      {
        "label": "甜度",
        "list": [
          {"label": "全糖", "value": ""},
          {"label": "半糖", "value": ""}
        ]
      }
    ].obs;

    print("$itemObj");

    isMaskVisible.value = true;
    _overlayEntry = OverlayEntry(
      builder: (context) => Positioned.fill(
        child: Scaffold(
          backgroundColor: const Color.fromRGBO(0, 0, 0, 0.5),
          body: GestureDetector(
            onTap: () {
              hideMask();
            },
            child: Column(
              children: [],
            ),
          ),
        ),
      ),
    );
    Overlay.of(Get.overlayContext!).insert(_overlayEntry!);
    isMaskVisible.value = true;
  }

  //隐藏遮罩层
  void hideMask() {
    _overlayEntry?.remove(); //移除overlayEntry
    _overlayEntry = null; //清空示例
    isMaskVisible.value = false;
  }

  @override
  void onInit() {
    // TODO: implement onInit
    super.onInit();
    _calculateKeys();
  }

  void _calculateKeys() {
    //清空之前的key
    rightKeys.clear();
    for (var i = 0; i < rightList.length; i++) {
      rightKeys.add(GlobalKey());
    }
    print(rightKeys);
  }
}
